import React, { Component } from 'react'
import PubSub from 'pubsub-js'
// import axios from 'axios'
export default class search extends Component {
  searchName = async () => {
    const { inputElment: { value: searchKey } } = this
    PubSub.publish("message", { isLoading: true })
    //#region  fetch发送网路请求（未优化）
    // fetch(`http://localhost:3000/api/search1?q=${searchKey}`)
    //   .then(
    //     res => {
    //       console.log("联系服务器成功", res)
    //       return res.json()
    //     },
    //     err => {
    //       console.log("联系服务器失败", err)
    //       //返回一个promise   阻止下一.then调用
    //       return new Promise(()=>{})
    //     }
    //   )
    //   .then(
    //     res => {
    //       console.log("获取数据成功", res)
    //     },
    //     err => {
    //       console.log("获取数据失败", err)
    //     }
    //   )
    //#endregion
    //fetch   关注分离的设计思想
    try {
      //await  只能等待成功结果 用tayCatch捕获异常
      let res = await fetch(`http://localhost:3000/api/search?q=${searchKey}`)
      let data = await res.json()
      PubSub.publish("message",{users:data})
      PubSub.publish("message",{isLoading:false})
    } catch (error) {
      console.log('请求出错',error)
    }
  }
  render() {
    return (
      <div className="search">
        <input ref={c => this.inputElment = c} type="text" />&nbsp;
        <button onClick={this.searchName}>search</button>
      </div>
    )
  }
}
